import React, { useEffect } from 'react';
import { List } from 'antd';
import { useSelector } from 'react-redux';
import { useLocation, Link } from 'react-router-dom';
import qs from 'qs';
import { useTopics } from '../../store/action/index';

function IndexList () {
  let { loading, data } = useSelector(state => state.topics);
  let { search } = useLocation();
  let { tab = 'all', page = 1 } = qs.parse(search.substr(1));
  let getData = useTopics();
  useEffect(() => {
    getData();
  }, [tab, page]);
  return (<List loading={loading} dataSource={data} style={{ padding: '0 15px' }} renderItem={(item) => {
    let { id, title } = item;
    return <List.Item><Link to={`/topic/${id}`}>{title}</Link></List.Item>
  }}>
  </List>)
};

export default IndexList;
